<template>
  <a-modal
    :maskClosable="false"
    centered
    :width="800"
    :visible="previewVisible"
    @ok="handleOk"
    @cancel="previewVisible = false"
  >
    <template slot="title">
      <span>自定义列表</span>
      <a-button type="link" size="small" class="_pl-20" @click="resetCustomtable">还原默认设置</a-button>
      <span class="fz-12 _pr-50" style="color: #999;float: right;">（部分特殊字段不支持控制超出省略）</span>
    </template>
    <a-table
      :scroll="{ y: 600 }"
      size="small"
      id="myTable1"
      row-key="title"
      :columns="columns"
      :data-source="tableColumns"
      :pagination="false"
    >
      <template slot="tableSort" slot-scope="text, record">
        <a-input-number size="small" :disabled="record.title === '操作'" v-model="record.tableSort" :min="1" :max="tableColumns.length" class="width-6" />
      </template>
      <!-- <template slot="width" slot-scope="text, record">
        <a-input-number v-model="record.width" :min="70" :max="500" />
      </template> -->
      <template slot="ellipsis" slot-scope="text, record">
        <a-switch v-if="isBoolean(record.ellipsis) && record.title !== '操作'" v-model="record.ellipsis" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-checkbox :disabled="record.title === '操作'" v-model="record.showCheck"></a-checkbox>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import Sortable from 'sortablejs'
import { cloneDeep, isBoolean } from 'lodash-es'

export default {
  data() {
    return {
      columns: [
        {
          title: '排序',
          width: 70,
          scopedSlots: {
            customRender: 'tableSort'
          }
        },
        {
          title: '字段名称',
          dataIndex: 'title'
        },
        // {
        //   title: '单元格宽度',
        //   width: 100,
        //   scopedSlots: {
        //     customRender: 'width'
        //   }
        // },
        {
          title: '超出部分省略',
          width: 100,
          scopedSlots: {
            customRender: 'ellipsis'
          }
        },
        {
          title: '是否显示',
          width: 100,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      tableColumns: [],
      previewVisible: false,
      tableName: '',
      oldColumns: {},
    }
  },
  created() {},
  methods: {
    isBoolean,
    show(params) {
      this.previewVisible = true
      this.tableName = params.tableName
      this.oldColumns = cloneDeep(params.columns);
      this.tableColumns = cloneDeep(params.columns);

      this.tableColumns.forEach((v,i) => {
        this.$set(v, 'showCheck', false);
        this.$set(v, 'tableSort', i+1);
        params.newColumns.forEach(k => {
          if (v.title === k.title) {
            v.showCheck = true;
            v.tableSort = k.tableSort || v.tableSort;
            v.width = k.width || v.width;
            v.ellipsis = isBoolean(k.ellipsis) ? k.ellipsis : v.ellipsis;
          }
        })
      })
      this.tableColumns.sort((a,b)=>{return a.tableSort - b.tableSort});
      // this.$nextTick(() => {
      //   this.initSortable()
      // })
    },
    // initSortable () {
    //   var _this = this
    //   const mytb = document.querySelector('#myTable1 tbody')
    //   var sortable = new Sortable(mytb, {
    //     handle: '.ant-table-row',
    //     animation: 150,
    //     ghostClass: 'blue-background-class',
    //     sort: true,
    //     async onEnd ({ newIndex, oldIndex }) {
    //       const source = _this.tableColumns[oldIndex] // 谁
    //       const destination = _this.tableColumns[newIndex] // 移动到哪儿
    //       console.log( source, destination);
    //       // 拖动后同步至stata
    //       _this.tableColumns[newIndex] = source
    //       _this.tableColumns[oldIndex] = destination
    //     }
    //   })
    // },
    // 还原当前页面默认设置
    resetCustomtable(){
      this.show({
        tableName: this.tableName,
        columns: this.oldColumns,
        newColumns: this.oldColumns
      })
    },
    handleOk() {
      let columns = []
      this.tableColumns.forEach(v => {
        if (v.showCheck) {
          columns.push({
            title: v.title,
            width: v.width,
            ellipsis: v.ellipsis,
            tableSort: v.tableSort
          })
        }
      })
      
      this.$store.commit('SET_CUSTOMTABLE', {
        tableName: this.tableName,
        columns
      })
      this.previewVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.resize-table-th {
  position: relative;
}
.table-draggable-handle {
  /* width: 10px !important; */
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
}
</style>
